<template>
  <div class="right-board" v-if="activeData !== undefined">
    <!-- <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="组件属性" name="field" />
      <el-tab-pane label="表单属性" name="form" />
    </el-tabs> -->
    <div class="field-box">
      <!-- <a class="document-link" target="_blank" :href="documentLink" title="查看组件文档">
        <i class="el-icon-link" />
      </a> -->
      <el-scrollbar class="right-scrollbar">
        <template>
          <el-card shadow="never" header="控件属性">
            <el-form size="small" label-width="75px" label-position="top">
              <!-- <el-form-item v-if="activeData.__vModel__!==undefined" label="字段名">
                <el-input v-model="activeData.__vModel__" placeholder="请输入字段名（v-model）" />
              </el-form-item> -->
              <!-- <el-form-item
                v-if="activeData.__config__.componentName !== undefined"
                label="组件名"
              >
                {{ activeData.__config__.componentName }}
              </el-form-item> -->
              <el-form-item
                v-if="activeData.__config__.hasOwnProperty('visible')"
                label="是否显示"
              >
                <el-switch v-model="activeData.__config__.visible"></el-switch>
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.__config__.showLabelChange !== false &&
                  activeData.__config__.hasOwnProperty('label')
                "
                label="标题"
              >
                <el-input
                  v-model="activeData.__config__.label"
                  placeholder="请输入标题"
                  @input="changeRenderKey"
                  clearable
                />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.__config__.hasOwnProperty('labelPosition')" label="标题对齐">
                <el-radio-group v-model="activeData.__config__.labelPosition" size="small">
                  <el-radio-button label="left">左</el-radio-button>
                  <el-radio-button label="top">顶部</el-radio-button>
                </el-radio-group>
              </el-form-item> -->
              <el-form-item
                v-if="
                  activeData.__config__.showPlaceholderChange !== false &&
                  activeData.hasOwnProperty('placeholder')
                "
                label="占位提示"
              >
                <el-input
                  v-model="activeData.placeholder"
                  placeholder="请输入占位提示"
                  @input="changeRenderKey"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['start-placeholder'] !== undefined"
                label="开始占位"
              >
                <el-input
                  v-model="activeData['start-placeholder']"
                  placeholder="请输入占位提示"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['end-placeholder'] !== undefined"
                label="结束占位"
              >
                <el-input
                  v-model="activeData['end-placeholder']"
                  placeholder="请输入占位提示"
                />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.__config__.showSpanChange !== false && activeData.__config__.span!==undefined" label="表单栅格">
                <el-slider v-model="activeData.__config__.span" :max="24" :min="1" :marks="{12:''}" @change="spanChange" />
              </el-form-item> -->
              <el-form-item
                v-if="
                  activeData.__config__.showSpanChange !== false &&
                  activeData.__config__.hasOwnProperty('span')
                "
                label="行布局"
              >
                <el-radio-group
                  v-model="activeData.__config__.span"
                  size="small"
                >
                  <el-radio-button :label="24">1列</el-radio-button>
                  <el-radio-button :label="12">2列</el-radio-button>
                  <el-radio-button :label="8">3列</el-radio-button>
                  <el-radio-button :label="6">4列</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.__config__.layout === 'rowFormItem' &&
                  activeData.gutter !== undefined
                "
                label="栅格间隔"
              >
                <el-input-number
                  v-model="activeData.gutter"
                  :min="0"
                  placeholder="栅格间隔"
                />
              </el-form-item>
              <!-- <el-form-item
                v-if="
                  activeData.__config__.layout === 'rowFormItem' &&
                  activeData.type !== undefined
                "
                label="布局模式"
              >
                <el-radio-group v-model="activeData.type">
                  <el-radio-button label="default" />
                  <el-radio-button label="flex" />
                </el-radio-group>
              </el-form-item> -->
              <el-form-item
                v-if="
                  activeData.justify !== undefined && activeData.type === 'flex'
                "
                label="水平排列"
              >
                <el-select
                  v-model="activeData.justify"
                  placeholder="请选择水平排列"
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(item, index) in justifyOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.align !== undefined && activeData.type === 'flex'
                "
                label="垂直排列"
              >
                <el-radio-group v-model="activeData.align">
                  <el-radio-button label="top" />
                  <el-radio-button label="middle" />
                  <el-radio-button label="bottom" />
                </el-radio-group>
              </el-form-item>
              <template v-if="activeData.__config__.tag === 'el-tabs'">
                <el-form-item label="选项卡所在位置">
                  <el-radio-group v-model="activeData['tab-position']">
                    <el-radio-button label="top" />
                    <el-radio-button label="right" />
                    <el-radio-button label="left" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  v-if="activeData.__config__.labelWidth !== undefined"
                  label="标签宽度"
                >
                  <el-input
                    v-model.number="activeData.__config__.labelWidth"
                    type="number"
                    placeholder="请输入标签宽度"
                  />
                </el-form-item>
              </template>
              <el-form-item
                v-if="activeData.__config__.showLabelWidthChange !== false && activeData.__config__.hasOwnProperty('labelWidth')"
                label="标签宽度"
              >
                <el-input
                  v-model.number="activeData.__config__.labelWidth"
                  type="number"
                  placeholder="请输入标签宽度"
                />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.style&&activeData.style.width!==undefined" label="组件宽度">
                <el-input v-model="activeData.style.width" placeholder="请输入组件宽度" clearable />
              </el-form-item> -->
              <el-form-item
                v-if="
                  activeData.__config__.showModel !== false &&
                  activeData.hasOwnProperty('__vModel__') &&
                  (['el-select', 'el-input', 'el-radio-group', 'el-checkbox-group'].includes(
                    activeData.__config__.tag
                  ) ||
                    ['textarea'].includes(activeData.type)) &&
                  activeData.disabled !== true
                "
                label="默认值"
              >
                <el-select
                  v-if="['el-select', 'el-radio-group', 'el-checkbox-group'].includes(activeData.__config__.tag)"
                  :multiple="activeData.multiple || activeData.__config__.tag == 'el-checkbox-group'"
                  v-model="activeData.__config__.defaultValue"
                  style="width: 100%;"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in activeData.__slot__.options"
                    :label="item.label"
                    :value="item.value"
                    :key="index"
                  ></el-option>
                </el-select>
                <el-input
                  v-else-if="
                    activeData.__config__.tag === 'el-input' ||
                    activeData.type === 'textarea'
                  "
                  :value="setDefaultValue(activeData.__config__.defaultValue)"
                  placeholder="请输入默认值"
                  @input="onDefaultValueInput"
                />
              </el-form-item>
              <template v-if="activeData.__config__.tag === 'el-collapse'">
                <el-form-item label="手风琴模式">
                  <el-switch v-model="activeData.accordion" />
                </el-form-item>
                <el-form-item
                  v-for="(item, index) in activeData.__config__.children"
                  :key="index"
                  :label="`面板${index + 1}名称`"
                >
                  <el-input
                    v-model="item.title"
                    :placeholder="`请输入面板${index}名称`"
                  />
                </el-form-item>
                <el-form-item
                  v-for="(item, index) in activeData.__config__.children"
                  :key="index"
                  label-width="160px"
                  :label="`${item.title}是否禁用`"
                >
                  <el-switch v-model="item.disabled" />
                </el-form-item>
              </template>
              <!-- 增加el-image操作 -->
              <template v-if="activeData.__config__.tag === 'el-image'">
                <el-form-item label="图片源">
                  <el-input
                    v-model="activeData.src"
                    placeholder="请输入图片源"
                  />
                </el-form-item>
                <el-form-item label="图片如何适应容器">
                  <el-radio-group v-model="activeData.fit">
                    <el-radio-button label="fill"> fill </el-radio-button>
                    <el-radio-button label="contain"> contain </el-radio-button>
                    <el-radio-button label="cover"> cover </el-radio-button>
                    <el-radio-button label="none"> none </el-radio-button>
                    <el-radio-button label="scale-down">
                      scale-down
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </template>
              <!--
              el-checkbox-group控制选中数量
              <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="至少应选">
                <el-input-number
                  :value="activeData.min"
                  :min="0"
                  placeholder="至少应选"
                  @input="$set(activeData, 'min', $event?$event:undefined)"
                />
              </el-form-item>
              <el-form-item v-if="activeData.__config__.tag==='el-checkbox-group'" label="最多可选">
                <el-input-number
                  :value="activeData.max"
                  :min="0"
                  placeholder="最多可选"
                  @input="$set(activeData, 'max', $event?$event:undefined)"
                />
              </el-form-item>
              -->
              <!-- 输入框图标前后缀
               <el-form-item v-if="activeData.__slot__&&activeData.__slot__.prepend!==undefined" label="前缀">
                <el-input v-model="activeData.__slot__.prepend" placeholder="请输入前缀" />
              </el-form-item>
              <el-form-item v-if="activeData.__slot__&&activeData.__slot__.append!==undefined" label="后缀">
                <el-input v-model="activeData.__slot__.append" placeholder="请输入后缀" />
              </el-form-item>
              -->
              <el-form-item
                v-if="activeData['prefix-icon'] !== undefined"
                label="前图标"
              >
                <el-input
                  v-model="activeData['prefix-icon']"
                  placeholder="请输入前图标名称"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-thumb"
                    @click="openIconsDialog('prefix-icon')"
                  >
                    选择
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="activeData['suffix-icon'] !== undefined"
                label="后图标"
              >
                <el-input
                  v-model="activeData['suffix-icon']"
                  placeholder="请输入后图标名称"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-thumb"
                    @click="openIconsDialog('suffix-icon')"
                  >
                    选择
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="
                  activeData['icon'] !== undefined &&
                  activeData.__config__.tag === 'el-button'
                "
                label="按钮图标"
              >
                <el-input
                  v-model="activeData['icon']"
                  placeholder="请输入按钮图标名称"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-thumb"
                    @click="openIconsDialog('icon')"
                  >
                    选择
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-cascader'"
                label="选项分隔符"
              >
                <el-input
                  v-model="activeData.separator"
                  placeholder="请输入选项分隔符"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData.hasOwnProperty('autosize')"
                label="最小行数"
              >
                <el-input-number
                  v-model="activeData.autosize.minRows"
                  :min="1"
                  placeholder="最小行数"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData.hasOwnProperty('autosize')"
                label="最大行数"
              >
                <el-input-number
                  v-model="activeData.autosize.maxRows"
                  :min="1"
                  placeholder="最大行数"
                />
              </el-form-item>
              <el-form-item v-if="isShowMin" label="最小值">
                <el-input-number
                  v-model="activeData.min"
                  placeholder="最小值"
                />
              </el-form-item>
              <el-form-item v-if="isShowMax" label="最大值">
                <el-input-number
                  v-model="activeData.max"
                  placeholder="最大值"
                  :max="activeData.__config__.max"
                  :min="activeData.__config__.min"
                />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.height!==undefined" label="组件高度">
                <el-input-number v-model="activeData.height" placeholder="高度" @input="changeRenderKey" />
              </el-form-item> -->
              <el-form-item v-if="isShowStep" label="步长">
                <el-input-number v-model="activeData.step" placeholder="步数" />
              </el-form-item>
              <!--
              el-input-number属性
              <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="精度">
                <el-input-number v-model="activeData.precision" :min="0" placeholder="精度" />
              </el-form-item>
              <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="按钮位置">
                <el-radio-group v-model="activeData['controls-position']">
                  <el-radio-button label="">
                    默认
                  </el-radio-button>
                  <el-radio-button label="right">
                    右侧
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              -->
              <el-form-item
                v-if="
                  activeData.__config__.showMaxLengthChange !== false &&
                  activeData.hasOwnProperty('maxlength')
                "
                label="最多输入"
              >
                <el-input
                  v-model.number="activeData.maxlength"
                  placeholder="请输入字符长度"
                >
                  <template slot="append"> 个字符 </template>
                </el-input>
              </el-form-item>
              <el-form-item
                v-if="activeData['active-text'] !== undefined"
                label="开启提示"
              >
                <el-input
                  v-model="activeData['active-text']"
                  placeholder="请输入开启提示"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['inactive-text'] !== undefined"
                label="关闭提示"
              >
                <el-input
                  v-model="activeData['inactive-text']"
                  placeholder="请输入关闭提示"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['active-value'] !== undefined"
                label="开启值"
              >
                <el-input
                  :value="setDefaultValue(activeData['active-value'])"
                  placeholder="请输入开启值"
                  @input="onSwitchValueInput($event, 'active-value')"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['inactive-value'] !== undefined"
                label="关闭值"
              >
                <el-input
                  :value="setDefaultValue(activeData['inactive-value'])"
                  placeholder="请输入关闭值"
                  @input="onSwitchValueInput($event, 'inactive-value')"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.type !== undefined &&
                  'el-date-picker' === activeData.__config__.tag
                "
                label="时间类型"
              >
                <el-select
                  v-model="activeData.type"
                  placeholder="请选择时间类型"
                  :style="{ width: '100%' }"
                  @change="dateTypeChange"
                >
                  <el-option
                    v-for="(item, index) in dateOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <!-- 上传 -->
              <!-- <el-form-item v-if="activeData.name !== undefined" label="文件字段名">
                <el-input v-model="activeData.name" placeholder="请输入上传文件字段名" />
              </el-form-item> -->
              <el-form-item
                v-if="activeData.accept !== undefined"
                label="文件类型"
              >
                <el-select
                  v-model="activeData.accept"
                  placeholder="请选择文件类型"
                  :style="{ width: '100%' }"
                  clearable
                >
                  <el-option label="图片" value="image/*" />
                  <el-option label="视频" value="video/*" />
                  <el-option label="音频" value="audio/*" />
                  <el-option label="excel" value=".xls,.xlsx" />
                  <el-option label="word" value=".doc,.docx" />
                  <el-option label="pdf" value=".pdf" />
                  <el-option label="txt" value=".txt" />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.fileSize !== undefined"
                label="文件大小"
              >
                <el-input
                  v-model.number="activeData.__config__.fileSize"
                  placeholder="请输入文件大小"
                >
                  <el-select
                    slot="append"
                    v-model="activeData.__config__.sizeUnit"
                    :style="{ width: '66px' }"
                  >
                    <el-option label="KB" value="KB" />
                    <el-option label="MB" value="MB" />
                    <el-option label="GB" value="GB" />
                  </el-select>
                </el-input>
              </el-form-item>
              <!-- <el-form-item v-if="activeData.action !== undefined" label="上传地址">
                <el-input v-model="activeData.action" placeholder="请输入上传地址" clearable />
              </el-form-item> -->
              <!-- <el-form-item v-if="activeData['list-type'] !== undefined" label="列表类型">
                <el-radio-group v-model="activeData['list-type']" size="small">
                  <el-radio-button label="text">
                    text
                  </el-radio-button>
                  <el-radio-button label="picture">
                    picture
                  </el-radio-button>
                  <el-radio-button label="picture-card">
                    picture-card
                  </el-radio-button>
                </el-radio-group>
              </el-form-item> -->
              <!--  el-button -->
              <el-form-item
                v-if="
                  activeData.type !== undefined &&
                  activeData.__config__.tag === 'el-button'
                "
                label="按钮类型"
              >
                <el-select v-model="activeData.type" :style="{ width: '100%' }">
                  <el-option label="primary" value="primary" />
                  <el-option label="success" value="success" />
                  <el-option label="warning" value="warning" />
                  <el-option label="danger" value="danger" />
                  <el-option label="info" value="info" />
                  <el-option label="text" value="text" />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.buttonText !== undefined"
                v-show="'picture-card' !== activeData['list-type']"
                label="按钮文字"
              >
                <el-input
                  v-model="activeData.__config__.buttonText"
                  placeholder="请输入按钮文字"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-button'"
                label="按钮文字"
              >
                <el-input
                  v-model="activeData.__slot__.default"
                  placeholder="请输入按钮文字"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['range-separator'] !== undefined"
                label="分隔符"
              >
                <el-input
                  v-model="activeData['range-separator']"
                  placeholder="请输入分隔符"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['picker-options'] !== undefined"
                label="时间段"
              >
                <el-input
                  v-model="activeData['picker-options'].selectableRange"
                  placeholder="请输入时间段"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData.format !== undefined"
                label="时间格式"
              >
                <el-input
                  :value="activeData.format"
                  placeholder="请输入时间格式"
                  @input="setTimeValue($event)"
                />
              </el-form-item>
              <!-- 单选/多选/下拉选项内容调整 -->
              <template
                v-if="
                  activeData.__config__.showOptionChange !== false &&
                  [
                    'el-checkbox-group',
                    'el-radio-group',
                    'el-select',
                  ].indexOf(activeData.__config__.tag) > -1
                "
              >
                <el-divider>选项</el-divider>
                <draggable
                  :list="activeData.__slot__.options"
                  :animation="340"
                  group="selectItem"
                  handle=".option-drag"
                >
                  <div
                    v-for="(item, index) in activeData.__slot__.options"
                    :key="index"
                    class="select-item"
                  >
                    <div class="select-line-icon option-drag">
                      <i class="el-icon-s-operation" />
                    </div>
                    <el-input
                      v-model="item.label"
                      placeholder="选项名"
                      size="small"
                    />
                    <el-input
                      placeholder="选项值"
                      size="small"
                      :value="item.value"
                      @input="setOptionValue(item, $event)"
                    />
                    <div
                      class="close-btn select-line-icon"
                      @click="
                        (
                          activeData.__slot__.options
                        ).splice(index, 1)
                      "
                    >
                      <i class="el-icon-remove-outline" />
                    </div>
                  </div>
                </draggable>
                <div style="margin-left: 20px">
                  <el-button
                    style="padding-bottom: 0"
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    @click="addSelectItem"
                  >
                    添加选项
                  </el-button>
                </div>
                <el-divider />
              </template>
              <template v-if="activeData.__config__.tag === 'el-card'">
                <!-- <el-form-item label="阴影显示时机">
                  <el-radio-group v-model="activeData.shadow">
                    <el-radio-button label="always ">
                      always
                    </el-radio-button>
                    <el-radio-button label="hover ">
                      hover
                    </el-radio-button>
                    <el-radio-button label="never">
                      never
                    </el-radio-button>
                  </el-radio-group>
                </el-form-item> -->
                <!-- class="el-form-item--label-top" -->
                <el-form-item label="子组件行布局" label-width="100px">
                  <el-radio-group
                    v-model="activeData.__config__.children.span"
                    size="small"
                    @input="changeCardChildrenSpan(activeData, $event)"
                  >
                    <el-radio-button :label="24">1列</el-radio-button>
                    <el-radio-button :label="12">2列</el-radio-button>
                    <el-radio-button :label="8">3列</el-radio-button>
                    <el-radio-button :label="6">4列</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </template>
              <template
                v-if="
                  ['el-cascader', 'el-table'].includes(
                    activeData.__config__.tag
                  )
                "
              >
                <el-divider>选项</el-divider>
                <el-form-item
                  v-if="activeData.__config__.dataType"
                  label="数据类型"
                >
                  <el-radio-group
                    v-model="activeData.__config__.dataType"
                    size="small"
                  >
                    <el-radio-button label="dynamic">
                      动态数据
                    </el-radio-button>
                    <el-radio-button label="static"> 静态数据 </el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <template v-if="activeData.__config__.dataType === 'dynamic'">
                  <el-form-item label="接口地址">
                    <el-input
                      v-model="activeData.__config__.url"
                      :title="activeData.__config__.url"
                      placeholder="请输入接口地址"
                      clearable
                      @blur="$emit('fetch-data', activeData)"
                    >
                      <el-select
                        slot="prepend"
                        v-model="activeData.__config__.method"
                        :style="{ width: '85px' }"
                        @change="$emit('fetch-data', activeData)"
                      >
                        <el-option label="get" value="get" />
                        <el-option label="post" value="post" />
                        <el-option label="put" value="put" />
                        <el-option label="delete" value="delete" />
                      </el-select>
                    </el-input>
                  </el-form-item>
                  <el-form-item label="数据位置">
                    <el-input
                      v-model="activeData.__config__.dataPath"
                      placeholder="请输入数据位置"
                      @blur="$emit('fetch-data', activeData)"
                    />
                  </el-form-item>

                  <el-form-item label="纵向边框">
                    <el-switch v-model="activeData.border" />
                  </el-form-item>

                  <el-form-item label="斑马纹">
                    <el-switch v-model="activeData.stripe" />
                  </el-form-item>

                  <el-form-item label="显示表头">
                    <el-switch v-model="activeData['show-header']" />
                  </el-form-item>

                  <draggable
                    :list="activeData.__config__.children"
                    :animation="340"
                    group="selectItem"
                    handle=".option-drag"
                  >
                    <div
                      v-for="(item, index) in activeData.__config__.children"
                      :key="index"
                      class="select-item"
                    >
                      <template v-if="item.prop">
                        <el-input
                          v-model="item.label"
                          placeholder="选项名"
                          size="small"
                        />
                        <el-input
                          v-model="item.prop"
                          placeholder="选项值"
                          size="small"
                        />
                        <div
                          class="close-btn select-line-icon"
                          @click="
                            activeData.__config__.children.splice(index, 1)
                          "
                        >
                          <i class="el-icon-remove-outline" />
                        </div>
                      </template>
                    </div>
                  </draggable>

                  <template v-if="activeData.props && activeData.props.props">
                    <el-form-item label="标签键名">
                      <el-input
                        v-model="activeData.props.props.label"
                        placeholder="请输入标签键名"
                      />
                    </el-form-item>
                    <el-form-item label="值键名">
                      <el-input
                        v-model="activeData.props.props.value"
                        placeholder="请输入值键名"
                      />
                    </el-form-item>
                    <el-form-item label="子级键名">
                      <el-input
                        v-model="activeData.props.props.children"
                        placeholder="请输入子级键名"
                      />
                    </el-form-item>
                  </template>
                </template>

                <!-- 级联选择静态树 -->
                <el-tree
                  v-if="activeData.__config__.dataType === 'static'"
                  draggable
                  :data="activeData.options"
                  node-key="id"
                  :expand-on-click-node="false"
                  :render-content="renderContent"
                />
                <div
                  v-if="activeData.__config__.dataType === 'static'"
                  style="margin-left: 20px"
                >
                  <el-button
                    style="padding-bottom: 0"
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    @click="addTreeItem"
                  >
                    添加父级
                  </el-button>
                </div>
                <el-divider />
              </template>

              <el-form-item
                v-if="activeData.__config__.optionType !== undefined"
                label="选项样式"
              >
                <el-radio-group v-model="activeData.__config__.optionType">
                  <el-radio-button label="default"> 默认 </el-radio-button>
                  <el-radio-button label="button"> 按钮 </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="activeData['active-color'] !== undefined"
                label="开启颜色"
              >
                <el-color-picker v-model="activeData['active-color']" />
              </el-form-item>
              <el-form-item
                v-if="activeData['inactive-color'] !== undefined"
                label="关闭颜色"
              >
                <el-color-picker v-model="activeData['inactive-color']" />
              </el-form-item>

              <!-- <el-form-item v-if="activeData.__config__.showLabel !== undefined
                && activeData.__config__.labelWidth !== undefined" label="显示标签"
              >
                <el-switch v-model="activeData.__config__.showLabel" />
              </el-form-item> -->
              <el-form-item
                v-if="activeData.branding !== undefined"
                label="品牌烙印"
              >
                <el-switch
                  v-model="activeData.branding"
                  @input="changeRenderKey"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['allow-half'] !== undefined"
                label="允许半选"
              >
                <el-switch v-model="activeData['allow-half']" />
              </el-form-item>
              <el-form-item
                v-if="activeData['show-text'] !== undefined"
                label="辅助文字"
              >
                <el-switch
                  v-model="activeData['show-text']"
                  @change="rateTextChange"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['show-score'] !== undefined"
                label="显示分数"
              >
                <el-switch
                  v-model="activeData['show-score']"
                  @change="rateScoreChange"
                />
              </el-form-item>
              <el-form-item
                v-if="activeData['show-stops'] !== undefined"
                label="显示间断点"
              >
                <el-switch v-model="activeData['show-stops']" />
              </el-form-item>
              <el-form-item
                v-if="activeData.range !== undefined"
                label="范围选择"
              >
                <el-switch v-model="activeData.range" @change="rangeChange" />
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.__config__.border !== undefined &&
                  activeData.__config__.optionType === 'default'
                "
                label="是否带边框"
              >
                <el-switch v-model="activeData.__config__.border" />
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-color-picker'"
                label="颜色格式"
              >
                <el-select
                  v-model="activeData['color-format']"
                  placeholder="请选择颜色格式"
                  :style="{ width: '100%' }"
                  clearable
                  @change="colorFormatChange"
                >
                  <el-option
                    v-for="(item, index) in colorFormatOptions"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="
                  activeData.size !== undefined &&
                  (activeData.__config__.optionType === 'button' ||
                    activeData.__config__.border ||
                    activeData.__config__.tag === 'el-color-picker' ||
                    activeData.__config__.tag === 'el-table' ||
                    activeData.__config__.tag === 'el-button')
                "
                label="组件尺寸"
              >
                <el-radio-group v-model="activeData.size">
                  <el-radio-button label="medium"> 中等 </el-radio-button>
                  <el-radio-button label="small"> 较小 </el-radio-button>
                  <el-radio-button label="mini"> 迷你 </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                v-if="activeData.hasOwnProperty('show-word-limit')"
                label="输入统计"
              >
                <el-switch v-model="activeData['show-word-limit']" />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.__config__.tag === 'el-input-number'" label="严格步数">
                <el-switch v-model="activeData['step-strictly']" />
              </el-form-item> -->
              <el-form-item
                v-if="activeData.__config__.tag === 'el-cascader'"
                label="任选层级"
              >
                <el-switch v-model="activeData.props.props.checkStrictly" />
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-cascader'"
                label="是否多选"
              >
                <el-switch v-model="activeData.props.props.multiple" />
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-cascader'"
                label="展示全路径"
              >
                <el-switch v-model="activeData['show-all-levels']" />
              </el-form-item>
              <el-form-item
                v-if="activeData.__config__.tag === 'el-cascader'"
                label="可否筛选"
              >
                <el-switch v-model="activeData.filterable" />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.clearable !== undefined" label="能否清空">
                <el-switch v-model="activeData.clearable" />
              </el-form-item> -->
              <el-form-item
                v-if="activeData.__config__.showTip !== undefined"
                label="显示提示"
              >
                <el-switch v-model="activeData.__config__.showTip" />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.__config__.tag === 'el-upload'" label="多选文件">
                <el-switch v-model="activeData.multiple" />
              </el-form-item> -->
              <el-form-item
                v-if="activeData['auto-upload'] !== undefined"
                label="自动上传"
              >
                <el-switch v-model="activeData['auto-upload']" />
              </el-form-item>
              <el-form-item
                v-if="activeData.readonly !== undefined"
                label="是否只读"
              >
                <el-switch v-model="activeData.readonly" />
              </el-form-item>
              <el-form-item
                v-if="activeData.disabled !== undefined"
                label="是否禁用"
              >
                <el-switch v-model="activeData.disabled" />
              </el-form-item>
              <!-- <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="能否搜索">
                <el-switch v-model="activeData.filterable" />
              </el-form-item> -->
              <!-- <el-form-item v-if="activeData.__config__.tag === 'el-select'" label="是否多选">
                <el-switch v-model="activeData.multiple" @change="multipleChange" />
              </el-form-item> -->
              <el-form-item
                v-if="
                  activeData.__config__.showRequiredChange !== false &&
                  activeData.__config__.hasOwnProperty('required') &&
                  !activeData.__config__.hasOwnProperty('validateType')
                "
                label="是否必填"
              >
                <el-switch v-model="activeData.__config__.required" />
              </el-form-item>

              <template v-if="activeData.__config__.layoutTree">
                <el-divider>布局结构树</el-divider>
                <el-tree
                  :data="[activeData.__config__]"
                  :props="layoutTreeProps"
                  node-key="renderKey"
                  default-expand-all
                  draggable
                >
                  <span slot-scope="{ node, data }">
                    <span class="node-label">
                      <svg-icon
                        class="node-icon"
                        :icon-class="
                          data.__config__
                            ? data.__config__.tagIcon
                            : data.tagIcon
                        "
                      />
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
              </template>
              <template
                v-if="activeData.__config__.hasOwnProperty('validateType')"
              >
                <el-divider>数值校验</el-divider>
                <el-form-item
                  v-if="
                    activeData.__config__.showRequiredChange !== false &&
                    activeData.__config__.hasOwnProperty('required')
                  "
                  label="是否必填"
                >
                  <el-switch v-model="activeData.__config__.required" />
                </el-form-item>
                <el-form-item label="校验类型">
                  <el-select
                    v-model="activeData.__config__.validateType"
                    placeholder="请选择"
                    :style="{ width: '100%' }"
                    clearable
                  >
                    <el-option label="数字" value="number" />
                    <el-option label="整数" value="integer" />
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="校验范围"
                  v-if="!isEmpty(activeData.__config__.validateType)"
                >
                  <el-input-number
                    v-model="activeData.__config__.min"
                    size="small"
                    placeholder="最小值"
                    :controls="false"
                    style="
                      display: inline-block;
                      width: 90px;
                      margin-right: 10px;
                    "
                  />
                  <span>到</span>
                  <el-input-number
                    v-model="activeData.__config__.max"
                    size="small"
                    placeholder="最大值"
                    :controls="false"
                    style="
                      display: inline-block;
                      width: 90px;
                      margin-left: 10px;
                    "
                  />
                </el-form-item>
              </template>
              <template v-if="Array.isArray(activeData.__config__.regList)">
                <el-divider>正则校验</el-divider>
                <div
                  v-for="(item, index) in activeData.__config__.regList"
                  :key="index"
                  class="reg-item"
                >
                  <span
                    class="close-btn"
                    @click="activeData.__config__.regList.splice(index, 1)"
                  >
                    <i class="el-icon-close" />
                  </span>
                  <el-form-item label="表达式">
                    <el-input v-model="item.pattern" placeholder="请输入正则" />
                  </el-form-item>
                  <el-form-item label="错误提示" style="margin-bottom: 0">
                    <el-input
                      v-model="item.message"
                      placeholder="请输入错误提示"
                    />
                  </el-form-item>
                </div>
                <div style="margin-left: 20px">
                  <el-button
                    icon="el-icon-circle-plus-outline"
                    type="text"
                    @click="addReg"
                  >
                    添加规则
                  </el-button>
                </div>
              </template>
              <!-- 自定义组件方式 -->
              <!-- ts-text -->
              <template v-if="activeData.__config__.tag === 'ts-text'">
                <el-form-item label="文本内容">
                  <el-input
                    v-model="activeData.__slot__.span"
                    type="textarea"
                    placeholder="请输入文本内容"
                  />
                </el-form-item>
                <el-form-item label="行高">
                  <el-input
                    v-model="activeData.style.lineHeight"
                    placeholder="请输入行高"
                  />
                </el-form-item>
                <el-form-item label="字体大小">
                  <el-input
                    v-model="activeData.style.fontSize"
                    placeholder="请输入字体大小"
                  />
                </el-form-item>
                <el-form-item label="字体加粗">
                  <el-switch v-model="activeData.style.fontWeight" active-value="bold" inactive-value="normal"/>
                </el-form-item>
                <el-form-item label="对齐方式">
                  <el-radio-group v-model="activeData.style.textAlign">
                    <el-radio-button label="left"> 左对齐 </el-radio-button>
                    <el-radio-button label="center"> 居中对齐 </el-radio-button>
                    <el-radio-button label="right"> 右对齐 </el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="字体颜色">
                  <el-input
                    v-model="activeData.style.color"
                    style="width: 120px; float: left"
                  />
                  <el-color-picker
                    v-model="activeData.style.color"
                    style="float: left"
                  />
                </el-form-item>
              </template>
              <!-- el-request-select -->
              <template
                v-if="activeData.__config__.tag === 'el-request-select'"
              >
                <el-form-item
                  v-if="
                    activeData.__config__.showModel !== false &&
                    activeData.hasOwnProperty('__vModel__')
                  "
                  label="默认值"
                >
                  <el-request-select
                    v-model="activeData.__config__.defaultValue"
                    :multiple="activeData.multiple"
                    clearable
                    :requestApi="activeData.requestApi"
                    :requestParams="activeData.requestParams"
                    :placeholder="activeData.placeholder"
                    :label="activeData.label"
                    :field="activeData.field"
                  >
                  </el-request-select>
                </el-form-item>
              </template>
              <!-- ts-img-upload -->
              <template v-if="activeData.__config__.tag === 'ts-img-upload'">
                <el-form-item label="上传张数">
                  <el-dropdown size="small" split-button type="primary">
                    {{
                      activeData.limit === undefined
                        ? "不限"
                        : activeData.limit + "张"
                    }}
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="activeData.limit = undefined"
                      >
                        不限
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-for="item in 10"
                        :key="item"
                        @click.native="activeData.limit = item + 1"
                      >
                        {{ item + 1 }}张
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-form-item>
              </template>
              <!-- ts-upload -->
              <template v-if="activeData.__config__.tag === 'ts-upload'">
                <el-form-item label="上传文件个数">
                  <el-dropdown size="small" split-button type="primary">
                    {{
                      activeData.limit === undefined
                        ? "不限"
                        : activeData.limit + "个"
                    }}
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        @click.native="activeData.limit = undefined"
                      >
                        不限
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-for="item in 10"
                        :key="item"
                        @click.native="activeData.limit = item + 1"
                      >
                        {{ item + 1 }}个
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-form-item>
              </template>
              <!-- 提示信息 -->
              <template v-if="'tip' in activeData.__config__">
                <el-form-item label="提示信息">
                  <el-input
                    v-model="activeData.__config__.tip"
                    style="width: 100%"
                  ></el-input>
                </el-form-item>
              </template>
              <!-- table-sheet -->
              <template v-if="activeData.__config__.tag === 'table-sheet'">
                <table-sheet-setting :activeData="activeData"></table-sheet-setting>
              </template>
              <!-- el-link -->
              <template v-if="activeData.__config__.tag === 'el-link'">
                <el-form-item label="链接文字">
                  <el-input v-model="activeData.__slot__.default" />
                </el-form-item>
                <el-form-item label="链接地址">
                  <el-input
                    v-model="activeData.href"
                    placeholder="请输入链接地址"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="是否打开新页面"></el-form-item>
                  <el-switch v-model="activeData.target" active-value="_blank" inactive-value="_self"/>
                </el-form-item>
              </template>
            </el-form>
          </el-card>
        </template>
      </el-scrollbar>
    </div>

    <treeNode-dialog
      :visible.sync="dialogVisible"
      title="添加选项"
      @commit="addNode"
    />
    <icons-dialog
      :visible.sync="iconsVisible"
      :current="activeData[currentIconModel]"
      @select="setIcon"
    />
  </div>
  <div class="right-board" v-else>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar"></el-scrollbar>
    </div>
  </div>
</template>

<script lang="jsx">
// import { isArray } from 'util'
const isArray = Array.isArray;
import draggable from "vuedraggable";
import TreeNodeDialog from "../../views/index/TreeNodeDialog.vue";
import { isNumberStr, isEmpty } from "../../utils/index.js";
import IconsDialog from "./IconsDialog.vue";
import TsSubForm from "./panelProperties/ts-sub-form.vue";
import TableSheetSetting from './panelProperties/tableSheet/index.vue'
import { saveFormConf } from "../../utils/db.js";

const dateTimeFormat = {
  date: "yyyy-MM-dd",
  week: "yyyy 第 WW 周",
  month: "yyyy-MM",
  year: "yyyy",
  datetime: "yyyy-MM-dd HH:mm:ss",
  daterange: "yyyy-MM-dd",
  monthrange: "yyyy-MM",
  datetimerange: "yyyy-MM-dd HH:mm:ss",
};
// 使changeRenderKey在目标组件改变时可用
const needRerenderList = ["tinymce"];

export default {
  components: {
    TableSheetSetting,
    TreeNodeDialog,
    IconsDialog,
    TsSubForm,
    draggable,
  },
  provide() {
    return {
      conf: this.activeData,
    };
  },
  props: ["showField", "activeData", "formConf"],
  data() {
    return {
      currentTab: "field",
      currentNode: null,
      dialogVisible: false,
      iconsVisible: false,
      currentIconModel: null,
      dateTypeOptions: [
        {
          label: "日(date)",
          value: "date",
        },
        {
          label: "周(week)",
          value: "week",
        },
        {
          label: "月(month)",
          value: "month",
        },
        {
          label: "年(year)",
          value: "year",
        },
        {
          label: "日期时间(datetime)",
          value: "datetime",
        },
      ],
      dateRangeTypeOptions: [
        {
          label: "日期范围(daterange)",
          value: "daterange",
        },
        {
          label: "月范围(monthrange)",
          value: "monthrange",
        },
        {
          label: "日期时间范围(datetimerange)",
          value: "datetimerange",
        },
      ],
      colorFormatOptions: [
        {
          label: "hex",
          value: "hex",
        },
        {
          label: "rgb",
          value: "rgb",
        },
        {
          label: "rgba",
          value: "rgba",
        },
        {
          label: "hsv",
          value: "hsv",
        },
        {
          label: "hsl",
          value: "hsl",
        },
      ],
      justifyOptions: [
        {
          label: "start",
          value: "start",
        },
        {
          label: "end",
          value: "end",
        },
        {
          label: "center",
          value: "center",
        },
        {
          label: "space-around",
          value: "space-around",
        },
        {
          label: "space-between",
          value: "space-between",
        },
      ],
      layoutTreeProps: {
        label(data, node) {
          const config = data.__config__;
          return data.componentName || `${config.label}: ${data.__vModel__}`;
        },
      },
    };
  },
  computed: {
    documentLink() {
      return (
        this.activeData.__config__.document ||
        "https://element.eleme.cn/#/zh-CN/component/installation"
      );
    },
    dateOptions() {
      if (
        this.activeData.type !== undefined &&
        this.activeData.__config__.tag === "el-date-picker"
      ) {
        if (this.activeData["start-placeholder"] === undefined) {
          return this.dateTypeOptions;
        }
        return this.dateRangeTypeOptions;
      }
      return [];
    },
    activeTag() {
      return this.activeData.__config__.tag;
    },
    isShowMin() {
      return (
        ["el-input-number", "el-slider"].indexOf(this.activeTag) > -1 ||
        this.activeData.hasOwnProperty("min")
      );
    },
    isShowMax() {
      return (
        ["el-input-number", "el-slider", "el-rate"].indexOf(this.activeTag) >
          -1 || this.activeData.hasOwnProperty("max")
      );
    },
    isShowStep() {
      // return ['el-input-number', 'el-slider'].indexOf(this.activeTag) > -1
      return false;
    },
  },
  watch: {
    formConf: {
      handler(val) {
        saveFormConf(val);
      },
      deep: true,
    },
  },
  methods: {
    isEmpty,
    changeCardChildrenSpan(activeData, val) {
      // console.log(activeData, val)
      activeData.__config__.children.cardBody.forEach((t) => {
        if (
          t.__config__.span !== undefined &&
          t.__config__.showSpanChange !== false
        ) {
          t.__config__.span = val;
        }
      });
    },
    addReg() {
      this.activeData.__config__.regList.push({
        pattern: "",
        message: "",
      });
    },
    addSelectItem() {
      let options = this.activeData.__slot__.options;
      options.push({
        label: "",
        value: "",
      });
    },
    addTreeItem() {
      ++this.idGlobal;
      this.dialogVisible = true;
      this.currentNode = this.activeData.options;
    },
    renderContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          <span>{node.label}</span>
          <span class="node-operation">
            <i
              on-click={() => this.append(data)}
              class="el-icon-plus"
              title="添加"
            ></i>
            <i
              on-click={() => this.remove(node, data)}
              class="el-icon-delete"
              title="删除"
            ></i>
          </span>
        </div>
      );
    },
    append(data) {
      if (!data.children) {
        this.$set(data, "children", []);
      }
      this.dialogVisible = true;
      this.currentNode = data.children;
    },
    remove(node, data) {
      this.activeData.__config__.defaultValue = []; // 避免删除时报错
      const { parent } = node;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    addNode(data) {
      this.currentNode.push(data);
    },
    setOptionValue(item, val) {
      item.value = isNumberStr(val) ? +val : val;
    },
    setDefaultValue(val) {
      if (Array.isArray(val)) {
        return val.join(",");
      }
      // if (['string', 'number'].indexOf(typeof val) > -1) {
      //   return val
      // }
      if (typeof val === "boolean") {
        return `${val}`;
      }
      return val;
    },
    onDefaultValueInput(str) {
      if (isArray(this.activeData.__config__.defaultValue)) {
        // 数组
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          str.split(",").map((val) => (isNumberStr(val) ? +val : val))
        );
      } else if (["true", "false"].indexOf(str) > -1) {
        // 布尔
        this.$set(this.activeData.__config__, "defaultValue", JSON.parse(str));
      } else {
        // 字符串和数字
        this.$set(
          this.activeData.__config__,
          "defaultValue",
          isNumberStr(str) ? +str : str
        );
      }
    },
    onSwitchValueInput(val, name) {
      if (["true", "false"].indexOf(val) > -1) {
        this.$set(this.activeData, name, JSON.parse(val));
      } else {
        this.$set(this.activeData, name, isNumberStr(val) ? +val : val);
      }
    },
    setTimeValue(val, type) {
      const valueFormat = type === "week" ? dateTimeFormat.date : val;
      this.$set(this.activeData.__config__, "defaultValue", null);
      this.$set(this.activeData, "value-format", valueFormat);
      this.$set(this.activeData, "format", val);
    },
    spanChange(val) {
      this.formConf.span = val;
    },
    multipleChange(val) {
      this.$set(this.activeData.__config__, "defaultValue", val ? [] : "");
    },
    dateTypeChange(val) {
      this.setTimeValue(dateTimeFormat[val], val);
    },
    rangeChange(val) {
      this.$set(
        this.activeData.__config__,
        "defaultValue",
        val ? [this.activeData.min, this.activeData.max] : this.activeData.min
      );
    },
    rateTextChange(val) {
      if (val) this.activeData["show-score"] = false;
    },
    rateScoreChange(val) {
      if (val) this.activeData["show-text"] = false;
    },
    colorFormatChange(val) {
      this.activeData.__config__.defaultValue = null;
      this.activeData["show-alpha"] = val.indexOf("a") > -1;
      this.activeData.__config__.renderKey = +new Date(); // 更新renderKey,重新渲染该组件
    },
    openIconsDialog(model) {
      this.iconsVisible = true;
      this.currentIconModel = model;
    },
    setIcon(val) {
      this.activeData[this.currentIconModel] = val;
    },
    changeRenderKey() {
      if (needRerenderList.includes(this.activeData.__config__.tag)) {
        this.activeData.__config__.renderKey = +new Date();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/variables";
.right-board {
  width: $rightPanelWidth;
  position: absolute;
  right: 0;
  top: $rightPanelTop;
  padding-top: 3px;
  ::v-deep .el-card__header {
    font-weight: bold;
  }
  .field-box {
    position: relative;
    // height: calc(100vh - 42px);
    height: calc(100vh - #{$scrollHeight});
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
::v-deep .el-divider__text {
  padding: 0 5px;
}
</style>
